<template>
  <view class="contract-pane">
    <view class="contract-pane_header">
      <text>{{ data.contractTypeName }}</text>
      <text class="extra" v-if="!data.contractFileId">暂未上传</text>
    </view>
    <view class="contract-pane_content" v-if="data.contractFileId">
      <view class="cell">
        <view style="flex-shrink: 0; margin-right: 24rpx">合同信息</view>
        <pre-file :id="data.contractFileId" />
      </view>
      <view class="cell m_border">
        <view>合同编号</view>
        <view>{{ data.contractNo || '-' }}</view>
      </view>
    </view>
  </view>
</template>
<script setup>
  import preFile from '@/components/upload-file/pre-file'

  const props = defineProps({
    data: {
      type: Object,
      default: () => {},
    },
  })
  // 用户信息
</script>
<style lang="less" scoped>
  .contract-pane {
    margin: 12rpx 0;
    background-color: #f7f8faff;
    &_header {
      padding: 0 24rpx;
      background-color: #f0f1f3ff;
      height: 88rpx;
      line-height: 88rpx;
      font-size: 30rpx;
      font-weight: 600;
      color: #191c27;
      display: flex;
      justify-content: space-between;

      .extra {
        font-weight: 400;
        color: #9ea5bb;
      }
    }
    &_content {
      padding: 0 24rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: #191c27;
      line-height: 44rpx;
      .cell {
        display: flex;
        justify-content: space-between;
        padding: 24rpx 0;
      }

      .m_border {
        border-top: 1px solid rgba(216, 216, 216, 0.3);
      }
    }
  }
</style>
